HTML Heading

    In this HTML tutorial, we will discuss the HTML heading elements and all the heading tags present in HTML5.

    HTML Heading

    To display the section heading, title or subtitle we can use the HTML heading tags. In HTML 5 we have 6 heading tags start from <h1> up to <h6>, where <h1> specify the largest heading and <h6> represent the smallest or sub heading. If the content is specified by heading tags, then it would be displayed large and bold as compared to other text content present on the web-page.

    Example 

    <h1>First Heading </h1>
<h2>Second Heading </h2>
<h3>Third Heading </h3>
<h4>Forth Heading </h4>
<h5>Fifth Heading </h5>
<h6>Sixth Heading </h6>

    Importance of Heading

    Headings are very important on a web page, and well-managed heading structure helps the search engine to find the right content for the query searched by the users. Most of the search engines queries by the users are specific about some topics. And the search engine looks for the heading elements present on every web page and then start filtering search results, a better heading structure can rank your web page on the search engine. To provide a better heading structure sub-heading must be used after main heading elements.

    Example 

    <!DOCTYPE html>
<html>
<head>
     <title>Heading Structure</title>
</head>

<body>
   <h1>TechGeekBuzz</h1>
   <h3>About TechGeekBuzz</h3>
   <p>Techgeekbuzz.com is the platform where you will find the all updated information about programming, mobile world reviews, about gadgets and a lot more in the category list.</p>

</body>
</html>

    Heading Size

    The heading size of the content is specified by the default settings of the web browser, however using the style attribute and font-size property we can alter the size of the heading.

    Example 

    <h1 style="font-size:90px;"> TechGeekBuzz </h1>

    HTML <hr> Horizontal Rule

    As its name suggests it is used to provide a thematic break on a web page. It displays a horizontal crease on the web page which generally uses to represent page break. 

    <h2>About us</h2>
<p> Welcome to techgeekbuzz </p>

<hr>

<h2>Contact Us</h2>
<p>You can connect with us through Email</p>

    How can we view the HTML Source code of a web-page?

    View Source Code

    Your HTML code is not private, the code you have written can be seen by other users via a web browser. To see the source code of a web-page you can right-click on the web-page and select the View source code option or you can directly press ctrl + u. Every web-browser allow you to see the web-page source code.

    Inspect HTML elements

    To see the specific HTML elements of the web-page, you can use the inspect feature provided by the web browser. To open the Inspect window of the web-page, right-click on the page and press the inspect option, or you can directly use the shortcut key ctrl+shift+I. Inspect window come very useful when we want to see the JavaScript errors or grab the specified HTML element.

    Summary

    • In HTML5 we have 6 heading elements, from <h1> to <h1>
    • <h1> is the largest heading whereas <h6> is the smallest.
    • Always use small heading tags for the subheading.
    • The default size of heading can be altered using style attribute and font-size property.
    • <hr> tag stands for the horizontal rule, and it displays a horizontal crease on the web-page.
    • hr represent page break.

    Previous Tutorial Next Tutorial